<template>
    <div class="back">
        名字：<input type="text" v-model="searchCondition.name">
        年龄：<input type="text" v-model="searchCondition.age">
        <button @click="search">搜索</button>
        <el-table :data="userList" stripe border  style="width: 100%">
            <el-table-column type="selection" width="55" />
            <el-table-column prop="id" label="ID"/>
            <el-table-column prop="name" label="名字"/>
            <el-table-column prop="age" label="年龄"/>
        </el-table>
    </div>
</template>

<script setup name="User">
    import {reactive, ref} from 'vue'
    import { ElTable } from 'element-plus'
    import userApi from '@/api/user'

    let userList = ref([])

    //搜索条件
    let searchCondition = reactive({
        name: '',
        age: ''
    })

    search()

    function search() {
        userApi.list(searchCondition).then(result => {
            userList.value = result.data
        })
    }



</script>

<style scoped>
    .back {
        background-color: skyblue;
        box-shadow: 0 0 10px;
        border-radius: 10px;
        padding: 20px;
    }

    button {
        margin: 0 5px;
    }

    li {
        font-size: 20px;
    }
</style>